<template>
    <div class="person">
      <h1>需求：水温达到50℃，或水位达到20cm，则联系服务器</h1>
      <h2 id="demo">水温：{{temp}}</h2>
      <h2>水位：{{height}}</h2>
      <button @click="changePrice">水温+1</button>
      <button @click="changeSum">水位+10</button>
    </div>
  </template>
  
  <script lang="ts" setup name="Person">
    import {ref,watch,watchEffect} from 'vue'
    // 数据
    let temp = ref(0)
    let height = ref(0)
  
    // 方法
    function changePrice(){
      temp.value += 10
    }
    function changeSum(){
      height.value += 1
    }
  
    //用watchEffect
    const stopWatchEffect = watchEffect(()=>{
      if(temp.value >= 50 || height.value >= 20){
        console.log('联系服务器1111');
      }
      if(temp.value >= 90 || height.value >= 100){
        console.log('联系服务器2222');
        stopWatchEffect()
      }
      console.log('联系服务器');
    })
  </script>